<!--
 * @Author: 李明明
 * @Date: 2020-10-21 10:22:42
 * @LastEditTime: 2022-05-05 17:46:14
 * @LastEditors: 李明明
 * @Description: 文章列表
 * @FilePath: /官网pc端/web/html/fragment/purch-inc/tab-list.htm
 * @symbol_custom_string_obkoro1: 代码版权方：'政府采购信息网'
-->
<link rel="stylesheet" href="/web/public/css/cover-icon.css">
<body>
  <div id="tab-list" class="course">
    <div class="list_center">
      <div class="tab">
        <ul class="tab_center">
          <li class="active">
            <h2>
              <a href="###" target="_blank" rel="noopener noreferrer" title="采购文件">采购文件</a>
            </h2>
          </li>
          <li>
            <h2>
              <a href="###" target="_blank" rel="noopener noreferrer" title="采购合同">采购合同</a>
            </h2>
          </li>
        </ul>
        <div class="list_wrap">
          <div class="list active">
            <h3>
              <a href="###" class="top">
                <p>1r最多显示18个字山东asdasda日照力抓流程再造确</p>
              </a>
            </h3>

            <a href="###" target="_blank" class="link_img cover">
              <img src="/web/img/ad-1.jpg" alt="">
              <img class="article-icon" src="/web/img/special.png" alt="文本类">
              <img class="big-play x-y-center" src="/web/img/play-icon.png" alt="音视频类">
            </a>
            <ul>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###">标题最多显示22个字</a>
                </h3>
              </li>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
                </h3>
              </li>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
                </h3>
              </li>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
                </h3>
              </li>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
                </h3>
              </li>
            </ul>
          </div>
          <div class="list">
            <a href="###" class="top">
              <p>1最多显示18个字山东asdasda日照力抓流程再造确</p>
            </a>
            <a href="###" target="_blank" class="link_img">
              <img src="/web/img/ad-1.jpg" alt="">
            </a>
            <ul>
              <li>
                <span class="rate"></span>
                <a href="###">标题最多显示22个字</a>
              </li>
              <li>
                <span class="rate"></span>
                <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
              </li>
              <li>
                <span class="rate"></span>
                <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
              </li>
              <li>
                <span class="rate"></span>
                <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
              </li>
              <li>
                <span class="rate"></span>
                <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
              </li>
            </ul>
          </div>
        </div>

      </div>
      <div class="tab">
        <ul class="tab_center">
          <li class="active">
            <h2>
              <a href="###" target="_blank" rel="noopener noreferrer" title="采购文件">采购文件</a>
            </h2>
          </li>
          <li>
            <h2>
              <a href="###" target="_blank" rel="noopener noreferrer" title="采购合同">采购合同</a>
            </h2>
          </li>
        </ul>
        <div class="list_wrap">
          <div class="list active">
            <h3>
              <a href="###" class="top">
                <p>1最多显示18个字山东asdasda日照力抓流程再造确</p>
              </a>
            </h3>

            <a href="###" target="_blank" class="link_img">
              <img src="/web/img/ad-1.jpg" alt="">
            </a>
            <ul>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###">标题最多显示22个字</a>
                </h3>
              </li>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###">新疆：疫情期间试用政采电子化不见面开评标流程</a>
                </h3>
              </li>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###">新疆：疫情期间试用政采电子化不见面开评标流程</a>
                </h3>
              </li>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###">新疆：疫情期间试用政采电子化不见面开评标流程</a>
                </h3>
              </li>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###">新疆：疫情期间试用政采电子化不见面开评标流程</a>
                </h3>
              </li>
            </ul>
          </div>
          <div class="list">
            <a href="###" class="top">
              <p>1最多显示18个字山东asdasda日照力抓流程再造确</p>
            </a>
            <a href="###" target="_blank" class="link_img">
              <img src="/web/img/ad-1.jpg" alt="">
            </a>
            <ul>
              <li>
                <span class="rate"></span>
                <a href="###">标题最多显示22个字</a>
              </li>
              <li>
                <span class="rate"></span>
                <a href="###">新疆：疫情期间试用政采电子化不见面开评标流程</a>
              </li>
              <li>
                <span class="rate"></span>
                <a href="###">新疆：疫情期间试用政采电子化不见面开评标流程</a>
              </li>
              <li>
                <span class="rate"></span>
                <a href="###">新疆：疫情期间试用政采电子化不见面开评标流程</a>
              </li>
              <li>
                <span class="rate"></span>
                <a href="###">新疆：疫情期间试用政采电子化不见面开评标流程</a>
              </li>
            </ul>
          </div>
        </div>

      </div>
      <div class="tab">
        <ul class="tab_center">
          <li class="active">
            <h2>
              <a href="###" target="_blank" rel="noopener noreferrer" title="采购文件">采购文件</a>
            </h2>
          </li>
          <li>
            <h2>
              <a href="###" target="_blank" rel="noopener noreferrer" title="采购合同">采购合同</a>
            </h2>
          </li>
        </ul>
        <div class="list_wrap">
          <div class="list active">
            <h3>
              <a href="###" class="top">
                <p>1最多显示18个字山东asdasda日照力抓流程再造确</p>
              </a>
            </h3>

            <a href="###" target="_blank" class="link_img">
              <img src="/web/img/ad-1.jpg" alt="">
            </a>
            <ul>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###">标题最多显示22个字</a>
                </h3>
              </li>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
                </h3>
              </li>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
                </h3>
              </li>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
                </h3>
              </li>
              <li>
                <span class="rate"></span>
                <h3>
                  <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
                </h3>
              </li>
            </ul>
          </div>
          <div class="list">
            <a href="###" class="top">
              <p>1最多显示18个字山东asdasda日照力抓流程再造确</p>
            </a>
            <a href="###" target="_blank" class="link_img">
              <img src="/web/img/ad-1.jpg" alt="">
            </a>
            <ul>
              <li>
                <span class="rate"></span>
                <a href="###">标题最多显示22个字</a>
              </li>
              <li>
                <span class="rate"></span>
                <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
              </li>
              <li>
                <span class="rate"></span>
                <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
              </li>
              <li>
                <span class="rate"></span>
                <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
              </li>
              <li>
                <span class="rate"></span>
                <a href="###" title="新疆：疫情期间试用政采电子化不见面开评标流程">新疆：疫情期间试用政采电子化不见面开评标流程</a>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</body>
<script src="/web/lib/less.min.js"></script>

<script>
  $('.tab_center').find('li').hover(function () {
    console.log($(this).index())
    var index = $(this).index()
    $(this).addClass('active')
    $(this).siblings('li').removeClass('active');
    console.log()
    $(this).parents('.tab_center').siblings('.list_wrap').find('.list').eq(index).addClass('active');
    $(this).parents('.tab_center').siblings('.list_wrap').find('.list').eq(index).siblings('.list').removeClass('active');
  })
</script>